<template>
  <div class="axios">
    <table>
      <thead>
        <th>序号</th>
        <th>昵称</th>
        <th>性别</th>
        <th>年龄</th>
        <th>学历</th>
      </thead>
      <tbody>
        <tr v-for="(item, index) of res" :key="index">
          <td>{{ item.uid }}</td>
          <td>{{ item.uname }}</td>
          <td>{{ item.gender == 1 ? "男" : "女" }}</td>
          <td>{{ date - item.birthday.slice(0, 4) }}</td>
          <td>{{item.education==1?"大学":item.education==2?"高中":item.education==3?"初中":"小学"}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { getIndex } from "../assets/js/apis/index.js";
export default {
  data() {
    return {
      res: [],
      date: "",
    };
  },
  created() {
    // 使用封装的axios接口
    getIndex().then((res) => {
      this.res = res.data;
      this.date = new Date();
      this.date = this.date.getFullYear();
    });
  },
};
</script>

<style lang="scss">
.axios {
  width: 500px;
  margin: 20px auto;
  >table{
    width: 500px;
    background-color: #eee;
    border-collapse: collapse;
    >thead>th{
      height: 45px;
      border-bottom: 1px dotted #999;
    }
    >tbody>tr{
      height: 45px;
      border-bottom: 1px dotted #999;
    }
  }
}
</style>